<template>
  <div class="app-container">
    <div>
      <!-- <div style="margin-bottom: 10px">
        {{data.name}}
      </div> -->
      <!--      <el-row :gutter="20">-->
      <!--        <el-col :sm="5">-->
      <!--          <el-card class="box-card">-->
      <!--            <div class="value">{{ data.accounts.temporary_quota || 0 }}</div>-->
      <!--            <div class="subtitle">临时额度</div>-->
      <!--          </el-card>-->
      <!--        </el-col>-->
      <!--        <el-col :sm="5">-->
      <!--          <el-card class="box-card">-->
      <!--            <div class="value">{{ data.accounts.available_quota || 0 }}</div>-->
      <!--            <div class="subtitle">剩余使用额度</div>-->
      <!--          </el-card>-->
      <!--        </el-col>-->
      <!--        <el-col :sm="5">-->
      <!--          <el-card class="box-card">-->
      <!--            <div class="value">{{ data.accounts.balance || 0 }}</div>-->
      <!--            <div class="subtitle">对账可开票金额<  /div>-->
      <!--          </el-card>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
    </div>
    <div class="filter-container">
      交易时间:
      <el-date-picker
        size="small"
        class="filter-item"
        v-model="dateArr"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        align="right"
        value-format="yyyy-MM-dd"
        unlink-panels
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      ></el-date-picker>
      <el-select
        v-model="listQuery.type"
        placeholder="交易类型"
        clearable
        style="width: 120px"
        class="filter-item"
        size="small"
      >
        <el-option
          v-for="type in types"
          :label="type.value"
          :value="type.key"
          :key="type.key"
        />
      </el-select>
      <el-input
        class="filter-item"
        v-model="listQuery.system_order_no"
        placeholder="关联系统订单号"
        style="width: 220px"
        clearable
        size="small"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        size="small"
        >搜索
      </el-button>
      <!--      <el-button class="filter-item" type="warning" icon="el-icon-edit" @click="handleRecharge(data.id)" size="small">充值-->
      <!--      </el-button>-->
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      size="small"
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          <!-- {{ scope.$index }} -->
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="时间"
        min-width="200"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
      <el-table-column label="额度明细" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status !== 'completed'" type="info">
            {{
              (scope.row.is_pay_out == 0 ? '+' : '-') + scope.row.change
            }}</el-tag
          >
          <el-tag v-else-if="scope.row.is_pay_out == 0" type="success">
            {{
              (scope.row.is_pay_out == 0 ? '+' : '-') + scope.row.change
            }}</el-tag
          >
          <el-tag v-else type="danger">
            {{
              (scope.row.is_pay_out == 0 ? '+' : '-') + scope.row.change
            }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作后余额" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.after }}
        </template>
      </el-table-column>
      <el-table-column label="类型" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column label="关联系统订单号" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.system_order_no || '-' }}
        </template>
      </el-table-column>
      <!--      <el-table-column label="备注" min-width="110" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.remark }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="操作人" min-width="110" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          系统-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column class-name="status-col" label="状态" min-width="110" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-tag v-if="scope.row.is_normal == 1" type="success">正常</el-tag>-->
      <!--          <el-tag v-else type="warning">禁用</el-tag>-->
      <!--        </template>-->
      <!--      </el-table-column>-->

      <!--      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">修改</el-button>-->
      <!--          <el-button v-if="scope.row.is_normal == 1" type="warning" size="mini" @click="handleStatus(scope.row.id, 0)">-->
      <!--            禁用-->
      <!--          </el-button>-->
      <!--          <el-button v-else size="mini" type="success" @click="handleStatus(scope.row.id, 1)">解禁</el-button>-->
      <!--          <div style="margin-top: 5px;">-->
      <!--            <el-button size="mini" type="primary" @click="handleUpdate1(scope.row)">常用信息修改-->
      <!--            </el-button>-->
      <!--          </div>-->

      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>

    <div class="pagination-container">
      <el-pagination
        size="small"
        :current-page="listQuery.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="listQuery.limit"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      title="充值"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="金额" prop="money">
          <el-input v-model="form.money" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveData" :loading="btnLoading"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="常用信息修改"
      :visible.sync="dialogFormVisible1"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form1"
        :rules="rules1"
        :model="form1"
        label-position="left"
        label-width="150px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="购买方名称" prop="buyer_name">
          <el-input v-model="form1.buyer_name" />
        </el-form-item>
        <el-form-item label="购买方纳税人识别号" prop="buyer_taxpayer_no">
          <el-input v-model="form1.buyer_taxpayer_no" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form1.address" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form1.phone" />
        </el-form-item>
        <el-form-item label="开户行" prop="bank">
          <el-input v-model="form1.bank" />
        </el-form-item>
        <el-form-item label="纳税人资质" prop="taxpayer_qualification_type">
          <el-select v-model="form1.taxpayer_qualification_type">
            <el-option label="小微企业" :value="1" />
            <el-option label="一般纳税人" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="开票类型" prop="invoicing_type">
          <el-select v-model="form1.invoicing_type">
            <el-option label="普通发票" :value="1" />
            <el-option label="专用发票" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="发送邮箱" prop="email">
          <el-input v-model="form1.email" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form1.remark" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="saveData1" :loading="btnLoading1"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="请输入操作密码"
      :visible.sync="dialogVisible2"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form2"
        :rules="rules2"
        :model="form2"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="操作密码" prop="password">
          <el-input v-model="form2.password" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="confirmPassword">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import uploadList from '@/components/UploadList/index.vue'

export default {
  components: { uploadList },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        nickname: '',
        is_forbidden: '',
        account_key: 'available_quota',
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加',
      },
      data: {},
      types: [],
      form: {
        app_client_id: undefined,
        money: 0,
      },
      rules: {
        money: [
          { required: true, message: '充值金额不能为空', trigger: 'blur' },
        ],
      },
      btnLoading: false,
      dialogFormVisible1: false,
      dialogStatus1: '',
      textMap1: {
        update: '编辑',
        create: '添加',
      },
      form1: {
        app_client_id: '',
        buyer_name: undefined,
        buyer_taxpayer_no: undefined,
        address: undefined,
        phone: undefined,
        bank: undefined,
        taxpayer_qualification_type: undefined,
        invoicing_type: undefined,
        email: undefined,
        remark: undefined,
      },
      rules1: {
        buyer_name: [
          { required: true, message: '购买方名称不能为空', trigger: 'blur' },
        ],
        buyer_taxpayer_no: [
          {
            required: true,
            message: '购买方纳税人识别号不能为空',
            trigger: 'blur',
          },
        ],
      },
      btnLoading1: false,
      dialogVisible2: false,
      form2: {
        id: '',
        password: undefined,
      },
      rules2: {
        password: [
          { required: true, message: '操作密码不能为空', trigger: 'blur' },
        ],
      },
      currentRow: null,
      currentIndex: null,
      visibleSecrets: [],
      dateArr: null,
    }
  },
  watch: {
    dateArr(newVal, oldVal) {
      if (newVal) {
        this.listQuery.start_at = newVal[0]
        this.listQuery.end_at = newVal[1]
      } else {
        this.listQuery.start_at = ''
        this.listQuery.end_at = ''
      }
    },
  },
  created() {
    this.getTypes()
    this.getDetail(this.$route.query.id)
    this.getList()
  },
  methods: {
    getDetail(id) {
      request({
        url: '/api/appClientend/app-client/detail',
        method: 'get',
        params: {
          id,
        },
      }).then((response) => {
        this.data = response.data
      })
    },
    getTypes() {
      request({
        url: '/api/appClientend/app-client/get-account-log-types',
        method: 'get',
        params: null,
      }).then((response) => {
        this.types = response.data
      })
    },
    openPasswordPrompt(index, row) {
      this.currentRow = row
      this.currentIndex = index
      this.form2.id = row.id
      this.dialogVisible2 = true
    },
    confirmPassword() {
      request({
        url: '/api/backend/app-client/get-secret',
        method: 'get',
        params: this.form2,
      }).then((response) => {
        this.$set(this.visibleSecrets, this.currentIndex, true)
        this.list[this.currentIndex].app_id = response.data.app_id
        this.list[this.currentIndex].app_secret = response.data.app_secret
        this.dialogVisible2 = false
      })
    },
    getList() {
      this.listLoading = true
      request({
        url: '/api/appClientend/app-client/account-logs',
        method: 'get',
        params: this.listQuery,
      }).then((response) => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    resetForm() {
      this.form = {
        app_client_id: undefined,
        money: 0,
      }
      this.btnLoading = false
    },
    handleCreate() {
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    handleUpdate(row) {
      this.resetForm()
      this.form = Object.assign(
        {
          imgArray: [
            'http://img.qkjcrm.com/c9fd9e7a-6e3c-42c7-8c9a-22c20cd3db22.png',
            'http://img.qkjcrm.com/f860dce0-04e4-49c4-926e-4a7a0360c8b0.png',
          ],
        },
        row
      ) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    handleRecharge(id) {
      this.resetForm()
      this.form.app_client_id = id
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    saveData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          request({
            url: '/api/backend/app-client-recharge/recharge',
            method: 'post',
            data: this.form,
          })
            .then((response) => {
              this.btnLoading = false
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success',
                duration: 2000,
              })
              this.getList()
            })
            .catch((err) => {
              this.btnLoading = false
            })
        }
      })
    },
    handleUpdate1(row) {
      this.form1 = Object.assign({}, row.app_client_info) // copy obj
      this.form1.app_client_id = row.id
      this.dialogStatus1 = 'update'
      this.dialogFormVisible1 = true
      this.$nextTick(() => {
        this.$refs['form1'].clearValidate()
      })
    },
    saveData1() {
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          this.btnLoading1 = true
          request({
            url: '/api/backend/app-client/store-info',
            method: 'post',
            data: this.form1,
          })
            .then((response) => {
              this.btnLoading1 = false
              this.dialogFormVisible1 = false
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success',
                duration: 2000,
              })
              this.getList()
            })
            .catch((err) => {
              this.btnLoading1 = false
            })
        }
      })
    },
    handleStatus(id, isNormal) {
      this.$confirm('此操作将修改客户端状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          request({
            url: '/api/backend/app-client/change-status',
            method: 'post',
            data: { id: id, is_normal: isNormal },
          }).then(() => {
            this.getList()
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.box-card {
  text-align: center;

  .value {
    color: #546dfe;
    font-weight: bold;
    font-size: 26px;
  }

  .subtitle {
    font-size: 12px;
    color: gray;
    margin-top: 6px;
  }
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  margin-bottom: 20px;
}

::v-deep .el-table .error-row {
  background-color: rgba(255, 0, 0, 0.2);
}

::v-deep .el-date-editor .el-range-separator {
  width: 8%;
}
</style>
